<template>
  <div>
    <div>
      <Nav></Nav>
      <v-title>我的订单</v-title>
    </div>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>我的订单</h2>
      </el-col>
    </el-row>
    <el-row>
      <div class="search">
        <el-select v-model="searchValue" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.searchValue"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;
        <button
          type="button"
          class="el-button el-button--primary is-round"
          @click="getOrderList"
        >
          <span>查询</span>
        </button>
      </div>
    </el-row>
    <br /><br />
    <el-row class="order-list">
      <div v-if="orderList.length > 0">
        <div
          v-for="(order, key) in orderList"
          :key="key"
          @click="getOrderDetail(order.orderSn)"
        >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b>订单编号：{{ order.orderSn }}</b>
            </div>
            <div class="text item">
              <el-row>
                <el-col :md="8"> 收件人：{{ userInfo.nickname }} </el-col>
                <el-col :md="8">
                  <span v-if="order.status == 0"
                    >订单状态：<el-tag type="info">未支付</el-tag></span
                  >
                  <span v-if="order.status == 1"
                    >订单状态：<el-tag type="danger">取消订单</el-tag></span
                  >
                  <span v-if="order.status == 2"
                    >订单状态：<el-tag>已支付</el-tag></span
                  >
                  <span v-if="order.status == 3"
                    >订单状态：<el-tag type="success">已收货</el-tag></span
                  >
                </el-col>
                <el-col :md="8" v-if="order.actualPrice > 0">
                  实付金额：<span class="detailContentPrice"
                    >￥{{ order.actualPrice }}</span
                  >
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :md="24"> 地址：{{ order.address }} </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :md="24"> 备注：{{ order.remark }} </el-col>
              </el-row>
            </div>
          </el-card>
          <br /><br />
        </div>
        <el-backtop />
        <el-divider>亲~已经看到底了吖~</el-divider>
      </div>
      <div v-else>
        <el-result title="您当前没有订单噢~" subTitle="目前您没有下过任何订单~可以游戏商城逛逛吖~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px"/>
          </template>
          <template slot="extra">
            <router-link to='/gameGoods'><el-button type="primary" size="medium">去康康~</el-button></router-link>
          </template>
        </el-result>
      </div>
    </el-row>
    <br />
    <el-dialog title="订单详情" :visible.sync="dialogOrderDetailVisible">
      <el-divider content-position="left">个人/订单信息部分</el-divider>
      <el-row>
        <el-col :md="10" :offset="1"> 收件人：{{ userInfo.nickname }} </el-col>

        <el-col :md="7" v-if="orderDetail.order.actualPrice > 0">
          实付金额：<span class="detailContentPrice"
            >￥{{ orderDetail.order.actualPrice }}</span
          >
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="23" :offset="1">
          地址：{{ orderDetail.order.address }}
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="23" :offset="1">
          备注：{{ orderDetail.order.remark }}
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="10" :offset="1">
          订单编号：<b>{{ orderDetail.order.orderSn }}</b>
        </el-col>
        <el-col :md="10" v-if="orderDetail.order.actualPrice > 0">
          支付时间：{{ orderDetail.order.payTime }}
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :md="8" :offset="1">
          <span v-if="orderDetail.order.status == 0"
            >订单状态：<el-tag type="info">未支付</el-tag></span
          >
          <span v-if="orderDetail.order.status == 1"
            >订单状态：<el-tag type="danger">取消订单</el-tag></span
          >
          <span v-if="orderDetail.order.status == 2"
            >订单状态：<el-tag>已支付</el-tag></span
          >
          <span v-if="orderDetail.order.status == 3"
            >订单状态：<el-tag type="success">已收货</el-tag></span
          >
        </el-col>
      </el-row>
      <br />
      <el-row v-if="orderDetail.order.actualPrice > 0">
        <el-col :md="23" v-if="orderDetail.order.payType == 1" :offset="1">
          支付方式：微信支付
        </el-col>
        <el-col :md="23" v-if="orderDetail.order.payType == 2" :offset="1">
          支付方式：支付宝支付
        </el-col>
      </el-row>
      <el-divider content-position="left">商品信息部分</el-divider>
      <div
        v-for="(orderGoods, key) in orderDetail.orderDetail"
        v-bind:key="key"
      >
        <el-row>
          <el-col :span="6" :offset="2"
            ><img :src="orderGoods.img" width="250" height="192"
          /></el-col>
          <el-col :span="12" :offset="4">
            <el-row>
              <router-link :to="`/gameGoodsDetail/${orderGoods.gameGoodsId}`">{{
                orderGoods.name
              }}</router-link>
            </el-row>
            <br />
            <el-row>
              <el-col :span="5">
                <span class="detailContent">子订单编号</span>
              </el-col>
              <el-col :span="19">
                <span class="detailContentNum">{{
                  orderGoods.orderSubSn
                }}</span>
              </el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="5">
                <span class="detailContent">价格</span>
              </el-col>
              <el-col :span="19">
                <span class="detailContentPrice">￥{{ orderGoods.price }}</span>
              </el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="5">
                <span class="detailContent">数量</span>
              </el-col>
              <el-col :span="19">
                <span class="detailContentNum">{{ orderGoods.num }}</span>
              </el-col>
            </el-row>
            <br />
            <el-row v-if="orderDetail.order.status > 1">
              <el-col :span="5">
                <span class="detailContent" v-if="orderGoods.refundStatus != 0"
                  >退款状态</span
                >
              </el-col>
              <el-col :span="19">
                <span
                  class="detailContentNum"
                  v-if="orderGoods.refundStatus == 0"
                  ><el-button type="danger" round @click="refund(orderGoods.orderSubSn, orderDetail.order.orderSn)" size="mini"
                    >申请退款</el-button
                  ></span
                >
                <span
                  class="detailContentNum"
                  v-if="orderGoods.refundStatus == 1"
                  >申请退款中，待审核</span
                >
                <span
                  class="detailContentNum"
                  v-if="orderGoods.refundStatus == 2"
                  >退款成功</span
                >
              </el-col>
            </el-row>
            <br />
            <el-row
              v-if="
                orderGoods.refundTime != null && orderGoods.refundStatus == 2
              "
            >
              <el-col :span="5">
                <span class="detailContent">退款时间</span>
              </el-col>
              <el-col :span="19">
                <span class="detailContentNum">{{
                  orderGoods.refundTime
                }}</span>
              </el-col>
            </el-row>
            <br />
          </el-col>
        </el-row>
        <br />
        <!-- <el-divider /> -->
      </div>
      <el-divider content-position="left">订单日志部分</el-divider>
      <div>
        <el-row>
          <el-col :offset="1">
            <el-timeline>
              <el-timeline-item
                v-for="(orderLog, index) in orderLogList"
                :key="index"
                :timestamp="orderLog.createTime"
              >
                {{ orderLog.message }}
                <span v-if="orderLog.beforeAccount - orderLog.afterAccount < 0"
                  >，余额增加【{{
                    orderLog.afterAccount - orderLog.beforeAccount
                  }}】元</span
                >
                <span
                  v-else-if="orderLog.beforeAccount - orderLog.afterAccount > 0"
                  >，余额减少【{{
                    orderLog.beforeAccount - orderLog.afterAccount
                  }}】元</span
                >
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
      </div>

      <el-divider
        content-position="left"
        v-if="orderDetail.order.status != 1 && orderDetail.order.status != 3"
        >操作</el-divider
      >
      <el-row>
        <el-col :offset="17" v-if="orderDetail.order.status == 0">
          <el-button
            type="primary"
            round
            @click="pay(orderDetail.order.orderSn)"
            >去支付</el-button
          >
          <el-button
            type="danger"
            round
            @click="cancel(orderDetail.order.orderSn)"
            >取消订单</el-button
          >
        </el-col>
        <el-col :offset="20" v-if="orderDetail.order.status == 2">
          <el-button
            type="success"
            round
            @click="receive(orderDetail.order.orderSn)"
            >确认收货</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import {
  getOrderList,
  getOrderDetail,
  getGameGoodsDetail,
  orderReceive,
  getOrderLog,
  payOrder,
  orderRefund
} from "@/api/index";
export default {
  name: "",
  created() {
    this.getOrderList();
  },
  components: {
    Nav,
    VTitle,
  },
  data() {
    return {
      orderList: [],
      orderDetail: {
        order: {
          actualPrice: null,
          address: null,
          createTime: null,
          id: 0,
          orderSn: null,
          payTime: null,
          payType: 0,
          payUrl: null,
          remark: null,
          status: 0,
          totalPrice: 0,
          updateTime: null,
          userId: 0,
        },
        orderDetail: [
          {
            createTime: null,
            gameGoodsId: 0,
            id: 0,
            num: 0,
            orderSn: null,
            orderSubSn: null,
            price: 0,
            refundStatus: 0,
            refundTime: null,
            updateTime: null,
          },
        ],
      },
      orderLogList: [],
      userInfo: this.$store.state.user.user,
      statusList: [
        {
          value: 4,
          label: "全部",
        },
        {
          value: 0,
          label: "未支付",
        },
        {
          value: 1,
          label: "取消订单",
        },
        {
          value: 2,
          label: "已付款",
        },
        {
          value: 3,
          label: "已收货",
        },
      ],
      searchValue: 4,
      dialogOrderDetailVisible: false,
    };
  },
  methods: {
    async getOrderList() {
      let that = this;
      await getOrderList(that.searchValue).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.orderList = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async getOrderDetail(orderSn) {
      this.dialogOrderDetailVisible = true;
      this.resetOrderDetail();
      let that = this;
      await getOrderDetail(orderSn).then(async (res) => {
        if (res.code == "200") {
          if (res.data != null) {
            let result = res.data;
            //goodsInfo
            for (var i = 0; i < res.data.orderDetail.length; i++) {
              await getGameGoodsDetail(
                res.data.orderDetail[i].gameGoodsId
              ).then((res) => {
                if (res.code == "200") {
                  result.orderDetail[i].img = res.data.mainPicUrl;
                  result.orderDetail[i].name = res.data.name;
                } else {
                  this.$message.error(res.msg);
                  return;
                }
              });
            }
            that.orderDetail = res.data;
            // 日志
            await getOrderLog(orderSn).then((res) => {
              if (res.code == "200") {
                if (res.data != null) {
                  that.orderLogList = res.data;
                }
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async refund(orderSubSn, orderSn) {
      let that = this;
      await orderRefund(orderSubSn).then((res) => {
        if (res.code == "200") {
          this.$message.success("申请退款成功~等待审核~");
          this.getOrderDetail(orderSn);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async receive(orderSn) {
      let that = this;
      await orderReceive(orderSn).then((res) => {
        if (res.code == "200") {
          this.$message.success("确认收货成功~");
          this.getOrderDetail(orderSn);
          this.getOrderList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async cancel(orderSn) {
      let that = this;
      await payOrder(orderSn, 1).then((res) => {
        if (res.code == "200") {
          this.$message.success("取消订单成功~");
          this.getOrderDetail(orderSn);
          this.getOrderList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    resetOrderDetail() {
      this.orderDetail = {
        order: {
          actualPrice: null,
          address: null,
          createTime: null,
          id: 0,
          orderSn: null,
          payTime: null,
          payType: 0,
          payUrl: null,
          remark: null,
          status: 0,
          totalPrice: 0,
          updateTime: null,
          userId: 0,
        },
        orderDetail: [
          {
            createTime: null,
            gameGoodsId: 0,
            id: 0,
            num: 0,
            orderSn: null,
            orderSubSn: null,
            price: 0,
            refundStatus: 0,
            refundTime: null,
            updateTime: null,
          },
        ],
      };
      this.orderLogList = [];
    },
    pay(orderSn) {
      let param = {
        orderSn
      };
      this.$router.push({
        path: "/payOrder",
        query: {
          param,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.el-input {
  width: 25%;
}

.order-list {
  width: 50%;
  margin-left: 25%;
}

a {
  font-size: 25px;
  color: #2abaca;
  font-weight: bolder;
}

.old-name {
  color: #000;
}

p {
  font-size: 12px;
  line-height: 20px;
  display: block;
  color: #9497a0;
}

.search {
  margin-left: 1000px;
}

.detailContentPrice {
  font-size: 16px;
  line-height: 20px;
  // display: block;
  color: red;
  font-weight: bold;
}
a {
  font-size: 18px;
  color: #2abaca;
  font-weight: bolder;
}
</style>